<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>iProteome商城-首页</title>
    <link rel="stylesheet" type="text/css" href="/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/css/main.css">
    <script type="text/javascript" src="/js/host.js"></script>
    <script type="text/javascript" src="/js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="/js/axios-0.18.0.min.js"></script>
    <script type="text/javascript" src="/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="/js/vue-cookies.js"></script>
    <!-- <script type="text/javascript" src="/js/slide.js"></script> -->
    <style>
        a {
            cursor: pointer;
        }
    </style>

</head>

<body>
    <div id="app" v-cloak>
        <div class="header_con">
            <div class="header">
                <div class="welcome fl">欢迎来到iProteome商城!</div>
                <div class="fr">
                    <div v-if="username" class="login_btn fl">
                        欢迎您：<em v-text="username"></em>
                        <a @click="logoutfunc" class="quit">退出</a>
                    </div>
                    <div v-else class="login_btn fl">
                        <a href="/login.html">登录</a>
                        <a @click="OA_login">OA登录</a>
                        <span>|</span>
                        <a href="register.html">注册</a>
                    </div>
                    <div class="user_link fl">
                        <span>|</span>
                        <a href="/user_center_info.html">用户中心</a>
                        <span>|</span>
                        <a href="/cart.html">我的购物车</a>
                        <span>|</span>
                        <a href="/user_center_order.html">我的订单</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="search_bar clearfix">
            <a href="index.html" class="logo fl"><img src="../images/logo.png"></a>
            <div class="search_wrap fl">
                <form method="get" action="/search.html" class="search_con">
                    <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
                    <input type="submit" class="input_btn fr" name="" value="搜索">
                </form>
                <ul class="search_suggest fl">
                    <li><a href="#">索尼微单</a></li>
                    <!-- <li><a href="#">优惠15元</a></li> -->
                    <li><a href="#">美妆个护</a></li>
                    <li><a href="#">买2免1</a></li>
                </ul>
            </div>

            <div class="guest_cart fr">
                <a href="cart.html" class="cart_name fl">我的购物车</a>
                <div class="goods_count fl" id="show_count">{{cart_total_count}}</div>
                <!-- <ul class="cart_goods_show">
                    <li v-for="cart in carts">
                        <img :src="cart.default_image_url" alt="商品图片">
                        <h4>[[ cart.name ]]</h4>
                        <div>[[ cart.count ]]</div>
                    </li>
                </ul> -->
            </div>
        </div>
        <div class="navbar_con">
            <div class="navbar">
                <!-- <h1 class="fl">商品分类</h1> -->
                <ul class="navlist fl">
                    <li><a href="">首页</a></li>
                    <li class="interval">|</li>
                    <li><a href="#">真划算</a></li>
                    <li class="interval">|</li>
                    <li><a href="#">抽奖</a></li>
                </ul>
            </div>
        </div>
        <div class="pos_center_con clearfix">
            <ul class="slide" ref='slide'>
                <li v-for="(i,index) in data.index_lbt" :key='i.index'><a href="#"><img :src="image_url+i.image"
                            :alt="i.title"></a></li>
                <!-- <li><a href="http://www.itcast.cn"><img src="images\slide02.jpg" alt="美图M8s"></a></li> -->
            </ul>

            <div class="prev"></div>
            <div class="next"></div>
            <ul class="points">
                <!-- <li class="active"></li>
                        <li></li> -->
            </ul>
            <ul class="sub_menu">
                <li v-for="(i,indx) in data.categories" :key='i.index'>
                    <div class="level1">
                        <a href="#" v-for="(chanel,index) in i.channels" :key='chanel.index'>{{chanel.name}}</a>
                        <!--                         
                            <a href="#">相机</a>
                        
                            <a href="#">数码</a> -->
                    </div>
                    <div class="level2">

                        <div class="list_group" v-for="(cat2,index) in i.sub_cats" :key='cat2.index'>

                            <div class="group_name fl">{{cat2.name}}&gt;</div>
                            <div class="group_detail fl">
                                <a :href="url+cat3.id" v-for="(cat3,index) in cat2.sub_cats"
                                    :key='cat3.index'>{{cat3.name}}</a>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>

        </div>
        <div class="list_model">
            <div class="list_title clearfix">
                <h3 class="fl" id="model01">最新商品</h3>
                <div class="subtitle fr">
                    <!-- <a @mouseenter="f1_tab=1" :class="f1_tab===1?'active':''">时尚新品</a> -->

                </div>
            </div>

            <div class="goods_list_con">
                <ul class="goods_list fl">
                    <!-- <li v-for="i in data.index_1f_ssxp" :key='i'><a :href="i.url"><img :src="i.image" :alt="i.title">i.title</a></li> -->
                    <li v-for="(i,index) in data.sku" :key='i.index'>
                        <a :href="sku_url+i.id" class="goods_pic"><img :src="image_url+i.default_image_url"></a>
                        <h4><a :href="sku_url+i.id" :title="i.name">{{i.name}}</a></h4>
                        <div class="price">{{i.price}} &nbsp;积分</div>
                    </li>
                </ul>
            </div>


            <!-- <div class="footer">
            <div class="foot_link">
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">联系我们</a>
                <span>|</span>
                <a href="#">招聘人才</a>
                <span>|</span>
                <a href="#">友情链接</a>
            </div> -->
            <!-- <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
            <p>电话：010-****888 京ICP备*******8号</p> -->
            <!-- </div> -->
        </div>
    </div>
    <script type="text/javascript" src="/js/common.js"></script>
    <!-- <script type="text/javascript" src="/js/index.js"></script> -->
    <!-- <script type="text/javascript" src="/js/slide.js"></script> -->
    <script>
        // 一个不聪明的方法，因为js是异步导入的，但是这里的需求是必须先导 /js/index.js，再导入/js/slide.js，所以
        // 就用了setTimeout，让/js/slide.js 1秒后导入
        function createScript(src) {
            let script = document.createElement('script');
            script.src = src;
            // 保证JS顺序执行！
            script.async = false
            document.body.appendChild(script);
        };
        createScript('/js/index.js');
        setTimeout(function main() {
            var $slides = $('.slide li');
            // var len = $slides.length;
            var len = $slides.length;
            // console.log(len)
            var nowli = 0;
            var prevli = 0;
            var $prev = $('.prev');
            var $next = $('.next');
            var timer = null;
            $slides.not(':first').css({ 'opacity': 0 });

            $slides.each(function (index, el) {
                var $li = $('<li>');
                if (index == 0) {
                    $li.addClass('active');
                }
                $li.appendTo($('.points'));
            });

            $points = $('.points li');
            timer = setInterval(autoplay, 4000);

            $('.pos_center_con').mouseenter(function () {
                clearInterval(timer);
            });

            $('.pos_center_con').mouseleave(function () {
                timer = setInterval(autoplay, 4000);
            });

            function autoplay() {
                nowli++;
                move();
                $points.eq(nowli).addClass('active').siblings().removeClass('active');
            };

            $points.click(function () {
                nowli = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                move();
            });
            $prev.click(function () {
                nowli--;
                move();
                $points.eq(nowli).addClass('active').siblings().removeClass('active');
            });
            $next.click(function () {
                nowli++;
                move();
                $points.eq(nowli).addClass('active').siblings().removeClass('active');

            });

            function move() {
                if (nowli == prevli) {
                    return;
                }

                if (nowli < 0) {
                    nowli = len - 1;
                    prevli = 0
                    $slides.eq(nowli).animate({ 'opacity': 1 }, 800);
                    $slides.eq(prevli).animate({ 'opacity': 0 }, 800);
                    prevli = nowli;
                    return;
                }

                if (nowli > len - 1) {
                    nowli = 0;
                    prevli = len - 1;
                    $slides.eq(nowli).animate({ 'opacity': 1 }, 800);
                    $slides.eq(prevli).animate({ 'opacity': 0 }, 800);
                    prevli = nowli;
                    return;
                }

                if (prevli < nowli) {
                    $slides.eq(nowli).animate({ 'opacity': 1 }, 800);
                    $slides.eq(prevli).animate({ 'opacity': 0 }, 800);
                    prevli = nowli;
                }
                else {
                    $slides.eq(nowli).animate({ 'opacity': 1 }, 800);
                    $slides.eq(prevli).animate({ 'opacity': 0 }, 800);
                    prevli = nowli;
                }
            }
        }
            , 1000);
    </script>




</body>

</html>